<template>
    <div class="comment-editor">
        <slot name="reply"></slot>

        <el-form ref="formRef" :model="form">
            <div class="form-item col md-12">
                <el-form-item prop="content">
                    <el-input
                        v-model="form.content"
                        type="textarea"
                        id="textarea"
                        rows="5"
                        placeholder="评论内容"
                    ></el-input>
                </el-form-item>
            </div>
            <div class="form-item col md-3">
                <el-form-item prop="name">
                    <el-input placeholder="昵称" prefix-icon="User" v-model="form.name" />
                </el-form-item>
            </div>
            <div class="form-item col md-3">
                <el-form-item prop="mail">
                    <el-input placeholder="邮件" prefix-icon="Message" v-model="form.mail" />
                </el-form-item>
            </div>
            <div class="form-item col md-6">
                <el-form-item prop="url">
                    <el-input placeholder="网址" prefix-icon="Link" v-model="form.url" />
                </el-form-item>
            </div>
        </el-form>
        <div class="opration-wrap">
            <el-popover placement="top-start" :width="420" trigger="click" v-if="!isCollapse">
                <template #reference>
                    <img class="opration-icon" src="@/assets/image/face.png" alt="" />
                </template>
                <div class="emoji-list">
                    <el-tooltip
                        v-for="(item, index) in emojiList"
                        :key="item.id"
                        effect="dark"
                        :content="item.name"
                        placement="top-start"
                    >
                        <a href="javascript:void(0)" class="emoji-item" @click="getEmoji(index)">
                            {{ item.char }}
                        </a>
                    </el-tooltip>
                </div>
            </el-popover>

            <slot name="button"></slot>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, ref, watch, computed, toRefs, reactive } from 'vue';
import Emojis from './emoji.json';

export default {
    name: 'comment-editor',
    emits: ['input'],
    setup() {
        const { proxy } = getCurrentInstance();
        let visible = ref(false);
        let emojiList = Emojis;

        let form = reactive({
            content: '',
            name: '',
            mail: '',
            url: ''
        });

        const getEmoji = (index) => {
            let text = form.content;
            let srt = emojiList[index].char;
            form.content = text + srt;
        };

        // 计算属性
        const isCollapse = computed(() => {
            return proxy.$store.state.collapse;
        });

        watch(form, (newVal, oldVal) => {
            proxy.$emit('input', newVal);
        });

        return {
            form,
            visible,
            emojiList,
            getEmoji,
            isCollapse
        };
    }
};
</script>

<style lang="less">
.comment-editor {
    background-color: rgba(255, 255, 255, 0.9);
    margin: 10px;
    padding: 20px;
    border-radius: 10px;

    .opration-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;

        .opration-icon {
            cursor: pointer;
            width: 25px;
        }
    }
}
.emoji-list {
    .emoji-item {
        width: 44px;
        height: 44px;
        line-height: 44px;
        display: inline-block;
        text-align: center;
        font-size: 20px;
        border: 1px solid #e3e3e3;
        margin-top: -1px;
        margin-left: -1px;
    }
}
</style>
